<template>
    <!-- 新版 -->
    <view class="page">
        <u-sticky>
            <view class="cont-top">
                <view class="search-cat-tit">
                    <u-search placeholder="请输入姓名或手机号" shape="round" bg-color="#f7f7f7" search-icon-color="#b2b2b2"
                        v-model="search_info" @change="changeKeyword" @search="search" @custom="search" :height="80">
                    </u-search>
                </view>
            </view>
        </u-sticky>
        <view class="city-content">
            <view class="invitation-list" v-for="(item, key) in items" :key="key">
                <view style="display: flex;">
                    <view class="titleBox">
                        <image :src="item.avatar"></image>
                    </view>
                    <view class="item-info">
                        <u-cell-group>
                            <u-cell-item icon="account" title="姓名" :icon-style="valueStyle" :value="item.nickname"
                                :title-style="valueStyle" :value-style="valueStyle" :arrow="false"></u-cell-item>
                            <u-cell-item icon="phone" title="手机号" :icon-style="valueStyle" :value="item.mobile"
                                :title-style="valueStyle" :value-style="valueStyle" :arrow="false"></u-cell-item>
                            <u-cell-item icon="clock" title="注册时间" :icon-style="valueStyle" :value="item.ctime_text"
                                :title-style="valueStyle" :value-style="valueStyle" :arrow="false"></u-cell-item>
                        </u-cell-group>
                    </view>
                    <!-- <view class="pa" style="background-color: #aaffff;">
                        <text>111</text>
                    </view> -->
                </view>
            </view>
        </view>
        <u-divider bg-color="#f7f7f7" :height="80" v-if="page==totalPage && items.length>4">已经到底了</u-divider>
        <u-divider :margin-top="40" :margin-bottom="40" bg-color="#f7f7f7" v-if="items.length<=0">暂无记录</u-divider>
        <u-back-top :scrollTop="scrollTop" mode="square" ></u-back-top>
    </view>
</template>

<script>
    export default {
        data() {
            return {
                scrollTop:0,
                items: [],
                page: 1,
                totalPage: 1,
                search_info: '',
                current: 0,
                child_total: 0,
                grand_total: 0,
                winHeight: 1070,
                g_total: 0,
                c_total: 0,
                u_total: 0,
                throttle: true, // 用于切换二级菜单时,防止清空输入框后自动请求2次列表数据
                last_page: 1,
                valueStyle: {
                    color: '#CFB386'
                }
            };
        },
        components: {},
        onLoad: function(e) {
            var _this = this;
            uni.getSystemInfo({
                success: function(res) {
                    _this.winHeight = res.windowHeight
                }
            });
            this.getItems(false, false, 2);
        },
        onPageScroll(e) {
            this.scrollTop = e.scrollTop;
        },
        //下拉刷新
        onPullDownRefresh() {
            this.reset()
            this.getItems(false, 'empty');
        },
        onReachBottom() {
            // this.page = this.page + 1;
            if (this.page < this.last_page) {
                this.page++;
                this.getItems();
            }
            // 已经到底部部
            console.log('已经到底部啦~');
        },
        methods: {

            BindInput: function(e) {
                this.search_info = e.detail.value;
            },
            downmLower() {
                this.page = this.page + 1;
                if (this.page <= this.totalPage) {
                    this.getItems();
                }
                // 已经到底部部
                console.log('已经到底部啦~');
            },
            doSearch() {
                this.reset()
                this.getItems()
            },
            // 切换菜单
            switchTab: function(current) {
                this.current = current;
                this.reset()
                this.getItems(false, 'empty');
            },
            // 获取列表数据
            getItems(loading, empty, isWeb) {
                uni.showLoading();
                if (empty) {
                    this.throttle = false
                    this.search_info = ''
                }
                this.$u.api.getUserTeam(
                {
                    keywords: this.search_info,
                    page: this.page
                }
                ).then(res => {
                    this.throttle = true
                    uni.stopPullDownRefresh();
                    if (res.data) {
                        if (this.page == 1) {
                            
                        }
                        this.last_page = res.last_page
                        this.items = this.items.concat(res.data);
                        uni.hideLoading();
                    }
                    uni.hideLoading();
                })
            },
            reset() {
                this.items = []
                this.page = 1
                this.last_page = 1
            },
            changeKeyword(e) {
                if (this.throttle) {
                    this.reset()
                    this.$u.debounce(this.getItems, 1000)
                }
            },
            search(e) {
                this.reset()
                this.getItems()
            },
        }
    };
</script>

<style>
    .u-cell {
        padding: 1rpx !important;
    }
    .u-back-top{
        right: 16rpx !important;
    }
</style>
<style lang="scss" scoped>
    .u-flex {
        display: flex;
        justify-content: space-between;
        margin-top: 10rpx;
        margin-left: 45rpx;
    }

    .page {
        min-height: 100vh;
        background-color: #f7f7f7;
        overflow: hidden;
        box-sizing: border-box;
    }

    .cont-top {
        background-color: #fff;
        padding: 14rpx 30rpx;

        .search-cat-tit {
            border-radius: 100rpx;
            overflow: hidden;
            margin-bottom: 20rpx;
        }

        .caption {
            display: flex;
            align-items: center;
            justify-content: space-between;
            padding: 0 20rpx;

            .my-sub-src {
                height: 70rpx;
                line-height: 70rpx;
                white-space: nowrap;
                width: 31%;
                border-radius: 10rpx;
                box-sizing: border-box;
                background: #F7F7F7;
                color: #000033;
                text-align: center;

                &.cur {
                    background: #0c8df1;
                    color: #fff;
                }
            }
        }
    }

    .invitation-list {
        background-color: #fff;
        margin: 20rpx;
        border-radius: 10rpx;
        padding: 34rpx;
        display: flex;
        align-items: center;
        font-weight: bold;
        position: relative;
        overflow: hidden;

        .titleBox {
            position: relative;

            image {
                width: 160rpx;
                height: 160rpx;
                border-radius: 10rpx;
            }

            text {
                position: absolute;
                right: -10rpx;
                top: -10rpx;
                background-color: #fa3534;
                padding: 0 10rpx;
                min-width: 28rpx;
                height: 28rpx;
                line-height: 28rpx;
                border-radius: 28rpx;
                text-align: center;
                color: #fff;
                font-size: 20rpx;
                // font-weight: bold;
            }
        }

        .item-info {
            width: 440rpx;
            margin-left: 30rpx;

            .title {
                font-size: 30rpx;
            }

            .phone {
                font-size: 28rpx;
                margin: 12rpx 0;
            }

            .label {
                font-size: 26rpx;
                margin-right: 40rpx;

                .color-red {
                    color: #F9463D;
                }

                .color-blue {
                    color: #538CBA;
                }
            }

            .experience {
                text-align: right;
                margin-top: 10rpx;
            }
        }

        .pa {
            position: absolute;
            right: -76rpx;
            top: -16rpx;
            width: 200rpx;
            height: 70rpx;
            transform: rotate(40deg);
            text-align: center;
            font-weight: normal;
            line-height: 98rpx;
            background-color: #0c8df1;
            color: #fff;
            font-size: 20rpx;
        }

        .pa-2 {
            position: absolute;
            right: 20rpx;
            top: 20rpx;
            display: flex;
            align-items: center;

            text {
                position: relative;
                margin-right: 8rpx;
                font-size: 24rpx;

                &.red::after {
                    position: absolute;
                    right: -6rpx;
                    top: 0;
                    content: "";
                    width: 10rpx;
                    height: 10rpx;
                    background-color: #F9463D;
                    border-radius: 50%;
                }
            }
        }
    }

    .btm_button {
        border-top: #e0e0e0 1px solid;
        width: 100%;
        margin-top: 20rpx;
        padding-top: 20rpx;
        display: flex;
        justify-content: center;
        color: #1296DB;

        .btns {
            width: 33%;
            text-align: center;
        }

        .gray {
            color: gray;
        }

        .red {
            color: red;
        }
    }
</style>
